<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员专区 - 荣耀</title>
    <!-- Tailwind CSS v3 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4f46e5',
                        secondary: '#818cf8',
                        accent: '#06b6d4',
                        dark: '#111827',
                        'dark-light': '#1f2937'
                    },
                    fontFamily: {
                        game: ['Montserrat', 'sans-serif'],
                        sans: ['Inter', 'sans-serif']
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'float': 'float 6s ease-in-out infinite'
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-20px)' }
                        }
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            }
            .text-glow {
                text-shadow: 0 0 10px rgba(79, 70, 229, 0.5), 0 0 20px rgba(79, 70, 229, 0.3);
            }
            .bg-glass {
                background: rgba(17, 24, 39, 0.7);
                backdrop-filter: blur(12px);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-10px);
            }
            .mask-gradient {
                mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
                -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
            }
        }
    </style>
    
    <!-- 额外的字体导入 -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@500;600;700;800&display=swap" rel="stylesheet">
</head>
<body class="bg-dark text-white min-h-screen font-sans">
    <!-- 导航栏 -->
    <header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center">
                    <i class="fa fa-gamepad text-xl"></i>
                </div>
                <h1 class="text-2xl font-bold font-game">荣耀</h1>
            </div>
            
            <!-- 桌面端导航 -->
            <nav class="hidden md:flex items-center space-x-8">
                <a href="#home" class="font-medium hover:text-primary transition-colors">首页</a>
                <a href="#membership" class="font-medium hover:text-primary transition-colors">会员专区</a>
                <a href="#benefits" class="font-medium hover:text-primary transition-colors">会员福利</a>
                <a href="#gallery" class="font-medium hover:text-primary transition-colors">游戏画廊</a>
                <a href="index.html" class="bg-primary hover:bg-primary/90 text-white px-5 py-2 rounded-lg transition-all">返回登录</a>
            </nav>
            
            <!-- 移动端菜单按钮 -->
            <button class="md:hidden text-white focus:outline-none" id="mobile-menu-button">
                <i class="fa fa-bars text-2xl"></i>
            </button>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div class="md:hidden hidden bg-dark-light/95 backdrop-blur-md absolute w-full" id="mobile-menu">
            <div class="container mx-auto px-4 py-4 flex flex-col space-y-4">
                <a href="#home" class="font-medium py-2 hover:text-primary transition-colors">首页</a>
                <a href="#membership" class="font-medium py-2 hover:text-primary transition-colors">会员专区</a>
                <a href="#benefits" class="font-medium py-2 hover:text-primary transition-colors">会员福利</a>
                <a href="#gallery" class="font-medium py-2 hover:text-primary transition-colors">游戏画廊</a>
                <a href="index.html" class="bg-primary hover:bg-primary/90 text-white px-5 py-3 rounded-lg transition-all text-center">返回登录</a>
            </div>
        </div>
    </header>

    <!-- 主页横幅 -->
    <section id="home" class="relative bg-no-repeat bg-center text-white min-h-screen flex items-center">
        <!-- 背景图片 -->
        <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://ts1.tc.mm.bing.net/th/id/R-C.8f288e88c1d70fee0fe4d23c23ad2f33?rik=lgTzU34rY7%2bM9Q&riu=http%3a%2f%2fpuui.qpic.cn%2fvcover_vt_pic%2f0%2f3r7bnv3gdykfdok1600163123669%2f0&ehk=N0jMGS%2fKjGAztgFH3QpYpyhisNDvx%2bfj6hcloGM9FP8%3d&risl=&pid=ImgRaw&r=0');"></div>
        
        <!-- 渐变叠加层 -->
        <div class="absolute inset-0 bg-gradient-to-r from-dark via-dark/80 to-transparent"></div>
        
        <!-- 内容容器 -->
        <div class="container mx-auto px-4 py-32 relative z-10">
            <div class="max-w-2xl">
                <div class="inline-block bg-primary/20 border border-primary/30 rounded-full px-4 py-1 mb-6">
                    <span class="text-primary font-medium">会员尊享</span>
                </div>
                <h1 class="text-[clamp(2.5rem,8vw,5rem)] font-bold mb-6 leading-tight text-shadow text-glow font-game">
                    欢迎来到<br>荣耀会员<br>专属世界
                </h1>
                <p class="text-lg md:text-xl text-white/90 mb-8 max-w-xl">
                    加入我们的会员计划，解锁独家游戏内容、专属装备和特权体验，让您的游戏之旅更加精彩。
                </p>
                <div class="flex flex-wrap gap-4">
                    <a href="#membership" class="bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-lg font-medium transition-all shadow-lg hover:shadow-primary/30 transform hover:-translate-y-1 flex items-center gap-2">
                        <span>立即加入</span>
                        <i class="fa fa-arrow-right"></i>
                    </a>
                    <a href="#benefits" class="bg-transparent border-2 border-white/30 hover:border-white text-white px-8 py-4 rounded-lg font-medium transition-all hover:bg-white/10 transform hover:-translate-y-1">
                        了解更多
                    </a>
                </div>
                
                <!-- 统计数据 -->
                <div class="mt-16 grid grid-cols-3 gap-6">
                    <div class="border-r border-white/10 pr-4">
                        <div class="text-3xl md:text-4xl font-bold text-primary mb-1">10M+</div>
                        <div class="text-white/60">活跃玩家</div>
                    </div>
                    <div class="border-r border-white/10 pr-4">
                        <div class="text-3xl md:text-4xl font-bold text-primary mb-1">500+</div>
                        <div class="text-white/60">专属装备</div>
                    </div>
                    <div>
                        <div class="text-3xl md:text-4xl font-bold text-primary mb-1">24/7</div>
                        <div class="text-white/60">专属客服</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 装饰元素 -->
        <div class="absolute right-0 bottom-0 w-1/2 h-1/2 opacity-30 mask-gradient pointer-events-none">
            <div class="absolute w-64 h-64 bg-primary/30 rounded-full blur-3xl -right-32 -bottom-32 animate-pulse-slow"></div>
            <div class="absolute w-96 h-96 bg-accent/20 rounded-full blur-3xl right-64 -bottom-48 animate-pulse-slow delay-1000"></div>
        </div>
    </section>

    <!-- 会员专区 -->
    <section id="membership" class="py-24 bg-gradient-to-b from-dark to-dark-light">
        <div class="container mx-auto px-4">
            <!-- 标题部分 -->
            <div class="text-center max-w-3xl mx-auto mb-16">
                <div class="inline-block bg-primary/20 border border-primary/30 rounded-full px-4 py-1 mb-4">
                    <span class="text-primary font-medium">会员等级</span>
                </div>
                <h2 class="text-3xl md:text-4xl font-bold mb-6 text-white font-game">选择适合您的会员计划</h2>
                <p class="text-white/70 text-lg">
                    我们提供多种会员等级，满足不同玩家的需求。每一级都能享受独特的游戏体验和专属福利。
                </p>
            </div>
            
            <!-- 会员卡片容器 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
                <!-- 基础会员卡片 -->
                <div class="bg-dark-light/80 backdrop-blur-md rounded-2xl shadow-xl overflow-hidden border border-white/10 card-hover">
                    <div class="p-8">
                        <div class="bg-primary/10 w-16 h-16 rounded-xl flex items-center justify-center mb-6">
                            <i class="fa fa-star text-primary text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold mb-2 text-white">基础会员</h3>
                        <div class="flex items-end mb-4">
                            <span class="text-4xl font-bold text-white">¥29</span>
                            <span class="text-white/60 ml-2 mb-1">/月</span>
                        </div>
                        <p class="text-white/70 mb-8">适合初次体验的玩家，享受基础游戏特权</p>
                        
                        <ul class="space-y-4 mb-10">
                            <li class="flex items-start">
                                <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                                <span class="text-white/80">完整基础游戏内容</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                                <span class="text-white/80">每周会员专属礼包</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                                <span class="text-white/80">基础专属头像框</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                                <span class="text-white/80">10%游戏内购买折扣</span>
                            </li>
                            <li class="flex items-start text-white/40">
                                <i class="fa fa-times text-gray-500 mt-1 mr-3"></i>
                                <span>专属游戏模式</span>
                            </li>
                            <li class="flex items-start text-white/40">
                                <i class="fa fa-times text-gray-500 mt-1 mr-3"></i>
                                <span>优先服务器访问</span>
                            </li>
                        </ul>
                        
                        <button class="w-full py-4 bg-white/10 hover:bg-white/20 text-white rounded-xl transition-all font-medium">立即订阅</button>
                    </div>
                </div>
                
                <!-- 高级会员卡片（推荐） -->
                <div class="bg-dark-light/80 backdrop-blur-md rounded-2xl shadow-2xl overflow-hidden border-2 border-primary relative card-hover transform scale-105 z-10">
                    <div class="absolute top-0 right-0 bg-primary text-white px-4 py-1 text-sm font-medium">
                        最受欢迎
                    </div>
                    <div class="p-8">
                        <div class="bg-primary/20 w-16 h-16 rounded-xl flex items-center justify-center mb-6">
                            <i class="fa fa-diamond text-primary text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold mb-2 text-white">高级会员</h3>
                        <div class="flex items-end mb-4">
                            <span class="text-4xl font-bold text-white">¥59</span>
                            <span class="text-white/60 ml-2 mb-1">/月</span>
                        </div>
                        <p class="text-white/70 mb-8">适合资深玩家，享受全面的游戏特权</p>
                        
                        <ul class="space-y-4 mb-10">
                            <li class="flex items-start">
                                <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                                <span class="text-white/80">完整游戏内容</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                                <span class="text-white/80">每周高级会员礼包</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                                <span class="text-white/80">高级专属头像框与角色</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                                <span class="text-white/80">20%游戏内购买折扣</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                                <span class="text-white/80">高级专属游戏模式</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                                <span class="text-white/80">优先服务器访问</span>
                            </li>
                        </ul>
                        
                        <button class="w-full py-4 bg-primary hover:bg-primary/90 text-white rounded-xl transition-all font-medium shadow-lg shadow-primary/20">立即订阅</button>
                    </div>
                </div>
                
                <!-- 尊享会员卡片 -->
                <div class="bg-dark-light/80 backdrop-blur-md rounded-2xl shadow-xl overflow-hidden border border-white/10 card-hover">
                    <div class="p-8">
                        <div class="bg-accent/10 w-16 h-16 rounded-xl flex items-center justify-center mb-6">
                            <i class="fa fa-crown text-accent text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold mb-2 text-white">尊享会员</h3>
                        <div class="flex items-end mb-4">
                            <span class="text-4xl font-bold text-white">¥99</span>
                            <span class="text-white/60 ml-2 mb-1">/月</span>
                        </div>
                        <p class="text-white/70 mb-8">终极游戏体验，尊享所有特权</p>
                        
                        <ul class="space-y-4 mb-10">
                            <li class="flex items-start">
                                <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                                <span class="text-white/80">所有游戏内容与DLC</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                                <span class="text-white/80">每周尊享豪华礼包</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                                <span class="text-white/80">全套专属外观与角色</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                                <span class="text-white/80">30%游戏内购买折扣</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                                <span class="text-white/80">所有专属游戏模式</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                                <span class="text-white/80">专属服务器与VIP客服</span>
                            </li>
                        </ul>
                        
                        <button class="w-full py-4 bg-accent hover:bg-accent/90 text-white rounded-xl transition-all font-medium">立即订阅</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 会员福利 -->
    <section id="benefits" class="py-24 bg-gradient-to-b from-dark-light to-dark relative overflow-hidden">
        <!-- 背景装饰 -->
        <div class="absolute inset-0 opacity-20">
            <div class="absolute top-0 left-1/4 w-96 h-96 bg-primary/30 rounded-full blur-3xl"></div>
            <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-accent/30 rounded-full blur-3xl"></div>
        </div>
        
        <div class="container mx-auto px-4 relative z-10">
            <!-- 标题部分 -->
            <div class="text-center max-w-3xl mx-auto mb-16">
                <div class="inline-block bg-primary/20 border border-primary/30 rounded-full px-4 py-1 mb-4">
                    <span class="text-primary font-medium">会员特权</span>
                </div>
                <h2 class="text-3xl md:text-4xl font-bold mb-6 text-white font-game">尊享专属游戏福利</h2>
                <p class="text-white/70 text-lg">
                    作为荣耀会员，您将享受一系列专属特权，提升游戏体验，彰显尊贵身份。
                </p>
            </div>
            
            <!-- 福利网格 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
                <!-- 福利项 -->
                <div class="bg-dark-light/60 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:border-primary/30 transition-all card-hover">
                    <div class="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mb-6">
                        <i class="fa fa-gift text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-white">独家礼包</h3>
                    <p class="text-white/70">
                        定期获得会员专属礼包，包含稀有装备、游戏货币和限时道具，助力您在游戏中脱颖而出。
                    </p>
                </div>
                
                <div class="bg-dark-light/60 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:border-primary/30 transition-all card-hover">
                    <div class="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mb-6">
                        <i class="fa fa-bolt text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-white">经验加速</h3>
                    <p class="text-white/70">
                        获得额外经验值加成，更快提升角色等级，解锁更多游戏内容和技能，享受畅爽升级体验。
                    </p>
                </div>
                
                <div class="bg-dark-light/60 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:border-primary/30 transition-all card-hover">
                    <div class="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mb-6">
                        <i class="fa fa-trophy text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-white">专属活动</h3>
                    <p class="text-white/70">
                        参与会员专属活动和锦标赛，赢取限定奖励和荣誉称号，展示您的游戏实力。
                    </p>
                </div>
                
                <div class="bg-dark-light/60 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:border-primary/30 transition-all card-hover">
                    <div class="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mb-6">
                        <i class="fa fa-paint-brush text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-white">个性定制</h3>
                    <p class="text-white/70">
                        解锁会员专属外观和个性化选项，打造独一无二的游戏角色形象，彰显您的独特品味。
                    </p>
                </div>
                
                <div class="bg-dark-light/60 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:border-primary/30 transition-all card-hover">
                    <div class="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mb-6">
                        <i class="fa fa-shield text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-white">优先体验</h3>
                    <p class="text-white/70">
                        抢先体验新内容和新功能，在其他玩家之前探索游戏更新，成为游戏先锋。
                    </p>
                </div>
                
                <div class="bg-dark-light/60 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:border-primary/30 transition-all card-hover">
                    <div class="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mb-6">
                        <i class="fa fa-headphones text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-white">专属客服</h3>
                    <p class="text-white/70">
                        享受优先客服支持，快速解决游戏中遇到的问题，确保您的游戏体验顺畅无忧。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 游戏画廊 -->
    <section id="gallery" class="py-24 bg-gradient-to-b from-dark to-dark-light">
        <div class="container mx-auto px-4">
            <!-- 标题部分 -->
            <div class="text-center max-w-3xl mx-auto mb-16">
                <div class="inline-block bg-primary/20 border border-primary/30 rounded-full px-4 py-1 mb-4">
                    <span class="text-primary font-medium">游戏视觉</span>
                </div>
                <h2 class="text-3xl md:text-4xl font-bold mb-6 text-white font-game">游戏精美画廊</h2>
                <p class="text-white/70 text-lg">
                    欣赏游戏中的精彩瞬间和绝美场景，感受荣耀世界的独特魅力。
                </p>
            </div>
            
            <!-- 画廊网格 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
                <!-- 画廊项目 -->
                <div class="relative group overflow-hidden rounded-xl aspect-video card-hover">
                    <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="游戏场景" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                        <div class="p-6">
                            <h3 class="text-xl font-bold text-white mb-2">战场风云</h3>
                            <p class="text-white/80">壮观的战斗场景，体验激烈对决</p>
                        </div>
                    </div>
                </div>
                
                <div class="relative group overflow-hidden rounded-xl aspect-video card-hover">
                    <img src="https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="游戏角色" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                        <div class="p-6">
                            <h3 class="text-xl font-bold text-white mb-2">英雄角色</h3>
                            <p class="text-white/80">精心设计的角色形象，各具特色</p>
                        </div>
                    </div>
                </div>
                
                <div class="relative group overflow-hidden rounded-xl aspect-video card-hover">
                    <img src="https://images.unsplash.com/photo-1509198397868-475647b2a1E6?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="游戏世界" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                        <div class="p-6">
                            <h3 class="text-xl font-bold text-white mb-2">奇幻世界</h3>
                            <p class="text-white/80">精美绝伦的游戏世界，身临其境</p>
                        </div>
                    </div>
                </div>
                
                <div class="relative group overflow-hidden rounded-xl aspect-video card-hover">
                    <img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="游戏战斗" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                        <div class="p-6">
                            <h3 class="text-xl font-bold text-white mb-2">激烈对决</h3>
                            <p class="text-white/80">体验紧张刺激的战斗系统</p>
                        </div>
                    </div>
                </div>
                
                <div class="relative group overflow-hidden rounded-xl aspect-video card-hover">
                    <img src="https://images.unsplash.com/photo-1536440136628-849c177e76a1?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="游戏装备" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                        <div class="p-6">
                            <h3 class="text-xl font-bold text-white mb-2">炫酷装备</h3>
                            <p class="text-white/80">多样化的装备系统，打造专属形象</p>
                        </div>
                    </div>
                </div>
                
                <div class="relative group overflow-hidden rounded-xl aspect-video card-hover">
                    <img src="https://images.unsplash.com/photo-1526379095395-0e44b24304c8?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="游戏社交" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                        <div class="p-6">
                            <h3 class="text-xl font-bold text-white mb-2">社交互动</h3>
                            <p class="text-white/80">与好友一起冒险，共同成长</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 常见问题 -->
    <section class="py-24 bg-gradient-to-b from-dark-light to-dark">
        <div class="container mx-auto px-4">
            <!-- 标题部分 -->
            <div class="text-center max-w-3xl mx-auto mb-16">
                <div class="inline-block bg-primary/20 border border-primary/30 rounded-full px-4 py-1 mb-4">
                    <span class="text-primary font-medium">解答疑惑</span>
                </div>
                <h2 class="text-3xl md:text-4xl font-bold mb-6 text-white font-game">常见问题解答</h2>
                <p class="text-white/70 text-lg">
                    我们收集了一些会员常见问题，希望能帮助您更好地了解会员服务。
                </p>
            </div>
            
            <!-- 问题列表 -->
            <div class="max-w-3xl mx-auto space-y-6">
                <!-- FAQ 项目 -->
                <div class="bg-dark-light/60 backdrop-blur-sm rounded-xl overflow-hidden">
                    <button class="faq-toggle w-full flex justify-between items-center p-6 text-left focus:outline-none">
                        <span class="text-lg font-medium text-white">如何成为荣耀会员？</span>
                        <i class="fa fa-plus text-primary transition-transform duration-300"></i>
                    </button>
                    <div class="faq-content hidden p-6 pt-0 border-t border-white/10">
                        <p class="text-white/70">
                            您可以通过游戏内商店或我们的官方网站订阅会员服务。选择适合您的会员等级，完成支付后即可立即享受会员特权。会员到期后，您可以选择自动续费或手动续费。
                        </p>
                    </div>
                </div>
                
                <div class="bg-dark-light/60 backdrop-blur-sm rounded-xl overflow-hidden">
                    <button class="faq-toggle w-full flex justify-between items-center p-6 text-left focus:outline-none">
                        <span class="text-lg font-medium text-white">会员特权可以与其他优惠叠加吗？</span>
                        <i class="fa fa-plus text-primary transition-transform duration-300"></i>
                    </button>
                    <div class="faq-content hidden p-6 pt-0 border-t border-white/10">
                        <p class="text-white/70">
                            是的，会员折扣可以与大多数游戏内促销活动叠加使用，让您享受更多优惠。但部分限时特惠活动可能有特殊规定，具体请以活动说明为准。
                        </p>
                    </div>
                </div>
                
                <div class="bg-dark-light/60 backdrop-blur-sm rounded-xl overflow-hidden">
                    <button class="faq-toggle w-full flex justify-between items-center p-6 text-left focus:outline-none">
                        <span class="text-lg font-medium text-white">我可以随时取消会员订阅吗？</span>
                        <i class="fa fa-plus text-primary transition-transform duration-300"></i>
                    </button>
                    <div class="faq-content hidden p-6 pt-0 border-t border-white/10">
                        <p class="text-white/70">
                            是的，您可以在会员中心随时取消自动续费。取消后，您仍然可以享受会员特权直到当前订阅周期结束。我们不会收取任何取消费用。
                        </p>
                    </div>
                </div>
                
                <div class="bg-dark-light/60 backdrop-blur-sm rounded-xl overflow-hidden">
                    <button class="faq-toggle w-full flex justify-between items-center p-6 text-left focus:outline-none">
                        <span class="text-lg font-medium text-white">如何升级或降级我的会员等级？</span>
                        <i class="fa fa-plus text-primary transition-transform duration-300"></i>
                    </button>
                    <div class="faq-content hidden p-6 pt-0 border-t border-white/10">
                        <p class="text-white/70">
                            您可以在会员中心随时升级或降级您的会员等级。升级后，新特权将立即生效，系统会按照剩余天数计算差额。降级后，新等级将在当前订阅周期结束后生效。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 行动召唤 -->
    <section class="py-24 bg-gradient-to-b from-dark to-dark relative overflow-hidden">
        <!-- 背景装饰 -->
        <div class="absolute inset-0">
            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary/20 rounded-full blur-3xl"></div>
        </div>
        
        <div class="container mx-auto px-4 relative z-10">
            <div class="max-w-4xl mx-auto bg-dark-light/80 backdrop-blur-md rounded-3xl p-8 md:p-12 border border-primary/30 text-center">
                <h2 class="text-3xl md:text-4xl font-bold mb-6 text-white font-game">准备好开始您的荣耀之旅了吗？</h2>
                <p class="text-white/80 text-lg mb-10 max-w-2xl mx-auto">
                    加入我们的会员计划，解锁所有游戏内容，享受专属特权，成为真正的荣耀战士！
                </p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <a href="#membership" class="bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-xl font-medium transition-all shadow-lg hover:shadow-primary/30 transform hover:-translate-y-1">
                        立即加入会员
                    </a>
                    <a href="#benefits" class="bg-transparent border-2 border-white/30 hover:border-white text-white px-8 py-4 rounded-xl font-medium transition-all hover:bg-white/10 transform hover:-translate-y-1">
                        了解更多特权
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark-light py-16 border-t border-white/10">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
                <!-- 公司信息 -->
                <div class="md:col-span-1">
                    <div class="flex items-center space-x-2 mb-6">
                        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center">
                            <i class="fa fa-gamepad text-xl"></i>
                        </div>
                        <h2 class="text-2xl font-bold font-game">荣耀</h2>
                    </div>
                    <p class="text-white/60 mb-6">
                        打造极致游戏体验，创造无限可能的游戏世界。
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-dark flex items-center justify-center text-white/60 hover:text-primary hover:bg-dark-light transition-colors">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-dark flex items-center justify-center text-white/60 hover:text-primary hover:bg-dark-light transition-colors">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-dark flex items-center justify-center text-white/60 hover:text-primary hover:bg-dark-light transition-colors">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-dark flex items-center justify-center text-white/60 hover:text-primary hover:bg-dark-light transition-colors">
                            <i class="fa fa-youtube-play"></i>
                        </a>
                    </div>
                </div>
                
                <!-- 快速链接 -->
                <div>
                    <h3 class="text-lg font-semibold mb-6 text-white">快速链接</h3>
                    <ul class="space-y-4">
                        <li><a href="#home" class="text-white/60 hover:text-primary transition-colors">首页</a></li>
                        <li><a href="#membership" class="text-white/60 hover:text-primary transition-colors">会员专区</a></li>
                        <li><a href="#benefits" class="text-white/60 hover:text-primary transition-colors">会员福利</a></li>
                        <li><a href="#gallery" class="text-white/60 hover:text-primary transition-colors">游戏画廊</a></li>
                        <li><a href="#" class="text-white/60 hover:text-primary transition-colors">下载游戏</a></li>
                    </ul>
                </div>
                
                <!-- 支持 -->
                <div>
                    <h3 class="text-lg font-semibold mb-6 text-white">支持</h3>
                    <ul class="space-y-4">
                        <li><a href="#" class="text-white/60 hover:text-primary transition-colors">帮助中心</a></li>
                        <li><a href="#" class="text-white/60 hover:text-primary transition-colors">常见问题</a></li>
                        <li><a href="#" class="text-white/60 hover:text-primary transition-colors">联系我们</a></li>
                        <li><a href="#" class="text-white/60 hover:text-primary transition-colors">隐私政策</a></li>
                        <li><a href="#" class="text-white/60 hover:text-primary transition-colors">服务条款</a></li>
                    </ul>
                </div>
                
                <!-- 订阅通讯 -->
                <div>
                    <h3 class="text-lg font-semibold mb-6 text-white">订阅通讯</h3>
                    <p class="text-white/60 mb-4">
                        订阅我们的通讯，获取最新游戏动态和独家优惠。
                    </p>
                    <form class="space-y-4">
                        <input type="email" placeholder="您的邮箱地址" class="w-full bg-dark border border-white/10 rounded-lg px-4 py-3 text-white placeholder-white/40 focus:outline-none focus:border-primary">
                        <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white rounded-lg px-4 py-3 font-medium transition-all">
                            订阅
                        </button>
                    </form>
                </div>
            </div>
            
            <div class="mt-16 pt-8 border-t border-white/10 text-center text-white/40">
                <p>© 2023 荣耀游戏. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 导航栏滚动效果
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', function() {
            if (window.scrollY > 50) {
                navbar.classList.add('bg-dark/95', 'backdrop-blur-md', 'shadow-lg');
            } else {
                navbar.classList.remove('bg-dark/95', 'backdrop-blur-md', 'shadow-lg');
            }
        });
        
        // 移动端菜单切换
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        
        mobileMenuButton.addEventListener('click', function() {
            mobileMenu.classList.toggle('hidden');
            const icon = mobileMenuButton.querySelector('i');
            if (mobileMenu.classList.contains('hidden')) {
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            } else {
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-times');
            }
        });
        
        // FAQ 切换
        const faqToggles = document.querySelectorAll('.faq-toggle');
        faqToggles.forEach(toggle => {
            toggle.addEventListener('click', function() {
                const content = this.nextElementSibling;
                const icon = this.querySelector('i');
                
                content.classList.toggle('hidden');
                if (!content.classList.contains('hidden')) {
                    icon.classList.remove('fa-plus');
                    icon.classList.add('fa-minus', 'rotate-45');
                } else {
                    icon.classList.remove('fa-minus', 'rotate-45');
                    icon.classList.add('fa-plus');
                }
            });
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    // 关闭移动端菜单
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                        const icon = mobileMenuButton.querySelector('i');
                        icon.classList.remove('fa-times');
                        icon.classList.add('fa-bars');
                    }
                    
                    // 滚动到目标位置
                    window.scrollTo({
                        top: targetElement.offsetTop - 80, // 导航栏高度偏移
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // 数字计数器动画效果
        function animateValue(id, start, end, duration) {
            const obj = document.getElementById(id);
            if (!obj) return;
            
            let startTimestamp = null;
            const step = (timestamp) => {
                if (!startTimestamp) startTimestamp = timestamp;
                const progress = Math.min((timestamp - startTimestamp) / duration, 1);
                const value = Math.floor(progress * (end - start) + start);
                
                // 格式化数字显示
                if (id === 'player-count') {
                    obj.innerText = value.toLocaleString() + '+';
                } else if (id === 'item-count') {
                    obj.innerText = value + '+';
                }
                
                if (progress < 1) {
                    window.requestAnimationFrame(step);
                }
            };
            window.requestAnimationFrame(step);
        }
        
        // 检测元素是否在视口中
        function isInViewport(element) {
            const rect = element.getBoundingClientRect();
            return (
                rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
                rect.bottom >= 0
            );
        }
        
        // 监听滚动，触发动画
        let animated = false;
        window.addEventListener('scroll', function() {
            if (!animated && isInViewport(document.getElementById('home'))) {
                animateValue('player-count', 0, 10000000, 2000); // 10M+ 活跃玩家
                animateValue('item-count', 0, 500, 2000); // 500+ 专属装备
                animated = true;
            }
        });
        
        // 页面加载时检查
        window.addEventListener('load', function() {
            if (isInViewport(document.getElementById('home'))) {
                animateValue('player-count', 0, 10000000, 2000);
                animateValue('item-count', 0, 500, 2000);
                animated = true;
            }
        });
    </script>
</body>
</html>
